<template>
	<view class="container">
		<view class="container-video" :style="{width: width + 'px' , height: height + 'px'}">
			<VideoVue @btnplay="btnplay" :src="src" :imgUrl="imgUrl" :uniqueKey="uniqueKey" ref="video"/>
		</view>
	</view>
</template>

<script>
	import VideoVue from '@/components/video/video.vue'
	export default {
		components:{
			VideoVue
		},
		props: {
			src: {
				type: String,
				default: () => ''
			},
			uniqueKey: {
				type: String,
				default: () => {}
			},
			max_width: {
				type: Number,
				default: () => 0
			},
		},
		data() {
			return {
				width: 0,
				height: 0
			}
		},
		watch: {
			'src': {
				handler(val) {
					console.log('width,height=>val', val)
					if (val) {

						this.handleSetImageStyle(val + '?x-oss-process=video/snapshot,t_0,f_jpg').then(({
							width,
							height
						}) => {
							console.log('width,height=>', width, height)
							console.log('systemInfo', this.$store.state.systemInfo)
							this.setImageInfo({
								width,
								height
							})
						})
					}
				},
				deep: true,
				immediate: true
			},
			max_width: {
				handler(val) {
					
					if (val > 0 && this.src) {
							
						this.handleSetImageStyle(this.src + '?x-oss-process=video/snapshot,t_0,f_jpg').then(({
							width,
							height
						}) => {
							console.log('width,height=>', width, height)
							console.log('systemInfo', this.$store.state.systemInfo)
							this.setImageInfo({
								width,
								height
							})
						})
					}
				},
				deep: true,
				immediate: true
			}
		},
		computed:{
			imgUrl(){
				return this.$props.src + '?x-oss-process=video/snapshot,t_0,f_jpg'
			},
			maxWidth(){
				if(this.$props.max_width > 0) {
					return this.max_width
				}
				return this.$store.state.systemInfo.screenWidth - 30
			}
		},
		methods: {
			btnplay(e){
					this.$emit('btnplay',e)
			},
			pause(){
				this.$refs.video.pause2()
			},
			play(){
				this.$refs.video.play()
			},
			//js 简写
			async handleSetImageStyle(src) {
				// 由于方法是异步的，渲染时高度会不生效，所以要加await
				let imageInfoObj = await uni.getImageInfo({
					src
				})

				// 取到图片的宽高
				let {
					width,
					height
				} = imageInfoObj[1]

				return {
					width,
					height
				}
			},
			setImageInfo({
				width,
				height
			}) {
				// 200/100 = 311/h
				const maxWidth = this.maxWidth;
				this.width = maxWidth
				this.height = (height*maxWidth/width).toFixed(2)
				console.log('width,height11=>', this.width, this.height)
				// // const maxHeight = 200;

				// const originalWidth = width;
				// const originalHeight = height;
				// const minWidth = 200;
				// const maxWidth = 311;
				// const maxHeight = 200;

				// const aspectRatio = originalWidth / originalHeight;

				// let newWidth, newHeight;

				// // 从最小宽度开始，逐步增加宽度，直到高度达到 200 像素或宽度达到最大宽度
				// for (let width = minWidth; width <= maxWidth; width++) {
				// 	newHeight = width / aspectRatio;
				// 	if (newHeight <= maxHeight) {
				// 		newWidth = width;
				// 		break;
				// 	}
				// }

				// // 如果没有找到合适的宽度，则使用最小宽度 200 像素
				// if (!newWidth) {
				// 	newWidth = 280;
				// 	newHeight = 200;
				// }

				// this.width = newWidth.toFixed(2)
				// this.height = newHeight.toFixed(2)
				// console.log(`New Width: ${newWidth.toFixed(2)}px`);
				// console.log(`New WidthHeight: ${newHeight.toFixed(2)}px`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;

		.container-video {
			// background: palevioletred;
		}
	}
</style>